import { Line, Circle, Text, Rect, Path, init as createZR } from 'zrender';

const getZrDisplay = (type) => {
  const getZrCtor = (type) => {
    switch (type) {
      case 'line':
        return Line;
      case 'rect':
        return Rect;
      case 'text':
        return Text;
      case 'circle':
        return Circle;
      default:
        return Path;
    }
  };

  const Ctor = getZrCtor(type);

  return (zr, attributes) => {
    const instance = new Ctor(attributes);

    zr.add(instance);

    return instance;
  };
};

const scale = (zr) => zr;

const rotate = (zr) => zr;

const translate = (zr) => zr;

export function createZRender(width, height, {
  line: drawLine = getZrDisplay('line'),
  circle: drawCircle = getZrDisplay('circle'),
  text: drawText = getZrDisplay('text'),
  rect: drawRect = getZrDisplay('rect'),
  path: drawPath = getZrDisplay('path'),
} = {}) {
  const dom = document.getElementById('main');
  const zr = createZR(dom, { width, height });

  return {
    line: (attributes) => drawLine(zr, attributes),
    circle: (attributes) => drawCircle(zr, attributes),
    text: (attributes) => drawText(zr, attributes),
    rect: (attributes) => drawRect(zr, attributes),
    path: (attributes) => drawPath(zr, attributes),

    scale: (...args) => scale(zr, ...args),
    rotate: (...args) => rotate(zr, ...args),
    translate: (...args) => translate(zr, ...args),

    context: () => zr,
  };
}
